---
type: tutorial
unitTitle: 재사용 가능한 페이지 레이아웃으로 시간과 에너지 절약
title: '체크인: 4단계 - 레이아웃'
description: >-
  튜토리얼: 첫 번째 Astro 블로그 구축 — Astro 레이아웃을 사용하여 페이지와 게시물 전체에서 공통 요소와 스타일을 공유하세요.
i18nReady: true
---

import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';

이제 컴포넌트를 사용하여 빌드할 수 있으므로 사용자 정의 레이아웃을 만들 차례입니다!

## 학습 내용 미리보기

이 단계에서는 페이지와 블로그 게시물 전체에서 공통 요소와 스타일을 공유하기 위한 레이아웃을 구축합니다.

이를 위해 다음을 수행합니다.

- 재사용 가능한 레이아웃 컴포넌트 만들기
- `<slot />`을 사용하여 콘텐츠를 레이아웃에 전달
- Markdown 프런트매터의 데이터를 레이아웃으로 전달
- 여러 레이아웃 중첩

<Box icon="check-list">

## 체크리스트

<Checklist>
- [ ] 레이아웃을 통해 페이지 디자인을 한 단계 더 발전시킬 준비가 되었습니다!
</Checklist>
</Box>
